<template>
	<view class="userEditing">
		<view class="noe-menu">
			<view class="for" @click="clickNicknameState">
				<view class="left" style="background: #53bcf5;"><text class="iconfont icon-chuangzuo"></text></view>
				<view class="center">昵称修改</view>
				<view class="right">
					<text class="iconfont icon-arrow-right"></text>
				</view>
			</view>
			<!-- 弹窗，昵称修改 -->
			<view class="nickname-modification" v-if="nicknameState">
				<input
					type="text"
					v-model="vModelNickname">
				<view @click="clickEditNickname">修改</view>
			</view>
			<view class="for" @click="clickAvatar">
				<view class="left" style="background: #a8c500;"><text class="iconfont icon-wode"></text></view>
				<view class="center">头像修改</view>
				<view class="right">
					<text class="iconfont icon-arrow-right"></text>
				</view>
			</view>
			<view class="for" @click="clickBanner">
				<view class="left" style="background: #ff705e;"><text class="iconfont icon-tupian"></text></view>
				<view class="center">背景条幅修改</view>
				<view class="right">
					<text class="iconfont icon-arrow-right"></text>
				</view>
			</view>
			<view class="for" @click="clickGender">
				<view class="left" style="background: #ff6600;"><text class="iconfont icon-nan"></text></view>
				<view class="center">性别</view>
				<view class="right">
					<text class="iconfont icon-arrow-right"></text>
				</view>
			</view>
			<view class="for" @click="birthdayState = !birthdayState">
				<view class="left" style="background: #00c5c7;"><text class="iconfont icon-lipinka"></text></view>
				<view class="center">生日</view>
				<view class="right">
					<text class="iconfont icon-arrow-right"></text>
				</view>
			</view>
			<view class="birthday-modification" v-if="birthdayState">
				<input type="number" v-model="vModelBirthdayYear" placeholder="1990" placeholder-style="color:#C0C4CC;">
				<text>年</text>
				<input type="number" v-model="vModelBirthdayMonth" placeholder="4" placeholder-style="color:#C0C4CC;">
				<text>月</text>
				<input type="number" v-model="vModelBirthdayDay" placeholder="27" placeholder-style="color:#C0C4CC;">
				<text>日</text>
				<view @click="clickEditBirthday">修改</view>
			</view>
			<view class="for" @click="bioState = !bioState">
				<view class="left" style="background: #ffd100;"><text class="iconfont icon-text"></text></view>
				<view class="center">简介</view>
				<view class="right">
					<text class="iconfont icon-arrow-right"></text>
				</view>
			</view>
			<view class="bio" v-if="bioState">
				<textarea maxlength="-1" v-model="vModelBio"></textarea>
				<view @click="clickEditBio">修改</view>
			</view>
			<view class="for" @click="clickConversationLimit">
				<view class="left" style="background: #a09989;"><text class="iconfont icon-taolunqu"></text></view>
				<view class="center">对话设置</view>
				<view class="right">
					<text class="iconfont icon-arrow-right"></text>
				</view>
			</view>
			<view class="explanatory-note">
				<template v-if="conversationLimit == 1">> 允许所有用户   </template>
				<template v-if="conversationLimit == 2">> 仅允许我关注的用户</template>
				<template v-if="conversationLimit == 3">> 我关注的用户和已认证的用户</template>
				<template v-if="conversationLimit == 4">> 不允许所有用户</template>
			</view>
			<view class="for" @click="clickCommentLimit">
				<view class="left" style="background: #43be4a;"><text class="iconfont icon-pinglun"></text></view>
				<view class="center">评论设置</view>
				<view class="right">
					<text class="iconfont icon-arrow-right"></text>
				</view>
			</view>
			<view class="explanatory-note">
				<template v-if="commentLimit == 1">> 允许所有用户</template>
				<template v-if="commentLimit == 2">> 仅允许我关注的用户</template>
				<template v-if="commentLimit == 3">> 我关注的用户和已认证的用户</template>
				<template v-if="commentLimit == 4">> 不允许所有用户</template>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nicknameState:false,
				birthdayState:false,
				bioState:false,
				vModelNickname:"loading...",
				vModelBirthdayYear:"",
				vModelBirthdayMonth:"",
				vModelBirthdayDay:"",
				vModelBio:"",
				conversationLimit:"",
				commentLimit:""
			}
		},
		onLoad() {
			this.Uid = uni.getStorageSync('user').data.detail.uid;
			this.getUserInformation(this.Uid)
		},
		methods: {
			// 点击昵称按钮
			clickNicknameState(){
				this.nicknameState = !this.nicknameState;
			},
			// 编辑昵称
			clickEditNickname(){
				uni.showLoading();
				this.$_Request(
					"PUT","/api/v2/user/edit",
					{
						"nickname":this.vModelNickname
					},
					(res) => {
						uni.hideLoading();
						this.nicknameState = false;
						if(res.data.code == 0){
							uni.showToast({
								title:'修改成功',
								icon:"none",
								duration:1000
							});
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				)
			},
			// 点击，修改简介
			clickEditBio(){
				uni.showLoading();
				this.$_Request(
					"PUT","/api/v2/user/edit",
					{
						"bio":this.vModelBio
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code == 0){
							uni.navigateBack()
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				)
			},
			// 点击头像按钮
			clickAvatar(){
				uni.chooseImage({
					count:1,
					success: (res_) => {
						this.avatarUploadFile(res_.tempFiles)
					}
				})
			},
			// 头像上传方法
			avatarUploadFile(e){
				uni.showLoading({ title: "上传中" });
				uni.uploadFile({
					url: this.$_Url() + "/api/v2/common/upload-file",
					filePath: e[0].path,
					name: "file",
					header: this.$_FresnsHeader(),
					formData:{
						"usageType":1,
						"tableName":"users",
						"tableColumn":"avatar_file_id",
						"tableKey":this.Uid,
						"type":"image",
						"uploadMode":"file"
					},
					success: (res) => {
						if(JSON.parse(res.data).code == 0){
							uni.request({
								url:this.$_Url() + "/api/v2/user/edit",
								method:'PUT',
								header:this.$_FresnsHeader(),
								data:{
									"avatarFid":JSON.parse(res.data).data.fid
								},
								success: (res_) => {
									uni.hideLoading();
									if(res_.data.code == 0){
										uni.navigateBack()
									}else{
										uni.showToast({
											title:res_.data.message,
											icon:"none",
											duration:1000
										});
									}
								}
							})
						}else{
							uni.hideLoading();
							uni.showToast({
								title:JSON.parse(res.data).message,
								icon:"none",
								duration:1000
							});
						}
					}
				})
			},
			// 点击背景条幅按钮
			clickBanner(){
				uni.chooseImage({
					count:1,
					success: (res_) => {
						this.bannerUploadFile(res_.tempFiles)
					}
				})
			},
			// 背景条幅上传方法
			bannerUploadFile(e){
				const _this = this;
				uni.showLoading({ title: "上传中" });
				uni.uploadFile({
					url: _this.$_Url() + "/api/v2/common/upload-file",
					filePath: e[0].path,
					name: "file",
					header: _this.$_FresnsHeader(),
					formData:{
						"usageType":1,
						"tableName":"users",
						"tableColumn":"banner_file_id",
						"tableKey":_this.Uid,
						"type":"image",
						"uploadMode":"file"
					},
					success(res) {
						if(JSON.parse(res.data).code == 0){
							uni.request({
								url:_this.$_Url() + "/api/v2/user/edit",
								method:'PUT',
								header:_this.$_FresnsHeader(),
								data:{
									"bannerFid":JSON.parse(res.data).data.fid
								},
								success: (res_) => {
									uni.hideLoading();
									if(res_.data.code == 0){
										uni.navigateBack()
									}else{
										uni.showToast({
											title:res_.data.message,
											icon:"none",
											duration:1000
										});
									}
								}
							})
						}else{
							uni.hideLoading();
							uni.showToast({
								title:JSON.parse(res.data).message,
								icon:"none",
								duration:1000
							});
						}
					}
				})
			},
			// 点击，性别按钮
			clickGender(){
				uni.showActionSheet({
					itemList: ['保密','男','女'],
					success: (res) => {
						this.putEditGender(res.tapIndex);
					}
				});
			},
			// 修改性别方法
			putEditGender(e){
				let id;
				if(e == 0){id = 1}
				if(e == 1){id = 2}
				if(e == 2){id = 3}
				uni.showLoading();
				this.$_Request(
					"PUT","/api/v2/user/edit",
					{
						"gender":id
					},
					(res) => {
						uni.hideLoading();
						setTimeout(()=>{
							uni.navigateBack()
						},200);
					}
				)
			},
			// 修改生日按钮
			clickEditBirthday(){
				uni.showLoading();
				this.$_Request(
					"PUT","/api/v2/user/edit",
					{
						"birthday":`${this.vModelBirthdayYear}-${this.vModelBirthdayMonth}-${this.vModelBirthdayDay}`
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code == 0){
							uni.navigateBack()
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				)
			},
			// 对话设置
			clickConversationLimit(){
				uni.showActionSheet({
					itemList: ['允许所有用户','仅允许我关注的用户','我关注的用户和已认证的用户','不允许所有用户'],
					success: (res) => {
						this.putConversationLimit(res.tapIndex);
					}
				});
			},
			// 对话设置方法
			putConversationLimit(e){
				let id;
				if(e == 0){id = 1}
				if(e == 1){id = 2}
				if(e == 2){id = 3}
				if(e == 3){id = 4}
				uni.showLoading();
				this.$_Request(
					"PUT","/api/v2/user/edit",
					{
						"conversationLimit":id
					},
					(res) => {
						uni.hideLoading();
						setTimeout(()=>{
							uni.navigateBack()
						},200);
					}
				)
			},
			// 评论设置
			clickCommentLimit(){
				uni.showActionSheet({
					itemList: ['允许所有用户','仅允许我关注的用户','我关注的用户和已认证的用户','不允许所有用户'],
					success: (res) => {
						this.putCommentLimit(res.tapIndex);
					}
				});
			},
			// 评论方法
			putCommentLimit(e){
				let id;
				if(e == 0){id = 1}
				if(e == 1){id = 2}
				if(e == 2){id = 3}
				if(e == 3){id = 4}
				uni.showLoading();
				this.$_Request(
					"PUT","/api/v2/user/edit",
					{
						"commentLimit":id
					},
					(res) => {
						uni.hideLoading();
						setTimeout(()=>{
							uni.navigateBack()
						},200);
					}
				)
			},
			// 获取用户信息
			getUserInformation(uid){
				this.$_Request(
					"GET","/api/v2/user/"+uid+"/detail",{},
					(res) => {
						this.vModelNickname = res.data.data.detail.nickname;
						this.vModelBio = res.data.data.detail.bio;
						this.conversationLimit = res.data.data.detail.conversationLimit;
						this.commentLimit = res.data.data.detail.commentLimit;
					}
				)
			},
		}
	}
</script>

<style lang="scss">
.explanatory-note{
	border-bottom: 1rpx solid $BeiJingSe;
	padding: 25rpx;
	font-size: 28rpx;
	line-height: 28rpx;
	color: $ZhanWeiSe;
}
.bio{
	padding: 25rpx;
	border-bottom: 1rpx solid $BeiJingSe;
	display: flex;
	textarea{
		background: $BeiJingSe;
		flex: 1;
		height: 150rpx;
		box-shadow: 0 0 1rpx #000;
	}
	view{
		width: 100rpx;
		height: 150rpx;
		background: $HuangSe;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		margin-left: 25rpx;
	}
}
.birthday-modification{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 25rpx;
	border-bottom: 1rpx solid $BeiJingSe;
	input{
		display: block;
		background: $BeiJingSe;
		text-align: center;
		font-size: 32rpx;
		line-height: 32rpx;
		height: 80rpx;
	}
	text{
		padding: 0 15rpx;
	}
	view{
		width: 100rpx;
		height: 80rpx;
		background: $HuangSe;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}
}
.nickname-modification{
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1rpx solid $BeiJingSe;
	padding: 25rpx;
	input{
		display: block;
		flex: 1;
		background: $BeiJingSe;
		height: 80rpx;
		font-size: 32rpx;
		text-align: center;
		flex-shrink: 0;
	}
	view{
		width: 180rpx;
		height: 80rpx;
		background: $HuangSe;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.userEditing{
	.noe-menu{
		.for{
			display: flex;
			align-items: center;
			padding: 25rpx;
			border-bottom: 1rpx solid $BeiJingSe;
			.left{
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 100%;
				text{
					color: #FFF;
				}
			}
			.center{
				flex: 1;
				margin: 0 15rpx;
			}
			.right{
				display: flex;
				align-items: center;
				.text{
					font-size: 22rpx;
					line-height: 22rpx;
					padding-right: 10rpx;
					color: $HongSe;
				}
				.iconfont{
					color: $ZhanWeiSe;
				}
			}
		}
	}
}
</style>
